<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.prime.com.tr/ui">

<ui:composition template="loginPageLayout.xhtml">
	<ui:define name="title">Contactos</ui:define>
	<ui:define name="content">
		<ui:include src="menu.xhtml" />
		<h:form id="display">
			<p:panel header="Buscar Usuarios" footer="" toggleable="true"
				closable="false" toggleSpeed="500"
				style="align:center; margin:3% 10% 2% 10%;">

				<h:panelGrid columns="3" title="Nombre Contacto">
					<h:outputLabel value="Buscar contacto" />
					<h:inputText id="Nombre" label="Nombre" required="true"
						value="#{contactos.nombre}" />
					<p:commandButton type="push" id="Buscar"
						action="#{contactos.buscarUsuario}" image="ui-icon-search"
						update="panel,encontrados" />

				</h:panelGrid>
				<!-- 				<p:panel id="encontrados" rendered="#{contactos.temporales}!=null"> Por algun motivo no funciona-->
				<p:panel id="encontrados">
					<p:dataGrid var="user" value="#{contactos.temporales}" columns="5"
						rows="5" paginator="true" effect="true"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						rowsPerPageTemplate="5,10,20">
						<p:column>
							<p:panel header="#{user.id}" style="text-align:center">
								<h:panelGrid columns="1" style="width:100%">
									<p:graphicImage value="/img/rss.png" />
									<h:outputText value="#{user.nombre} #{user.apellido}" />
									<h:outputText value="#{user.email}" />
									<p:commandButton type="push" id="Invitar" label="Invitar"
										image="ui-icon-mail-closed" action="#{contactos.invitar}">
										<f:setPropertyActionListener value="#{user}"
											target="#{contactos.contacto}" />
									</p:commandButton>
								</h:panelGrid>
							</p:panel>
						</p:column>

					</p:dataGrid>

				</p:panel>

			</p:panel>
			<p:panel header="Contactos del Usuario" footer="" toggleable="true"
				closable="false" toggleSpeed="500"
				style="align:center; margin:3% 10% 30% 10%;">
				<p:dataGrid var="user" value="#{contactos.todos}" columns="5"
					rows="5" paginator="true" effect="true"
					paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
					rowsPerPageTemplate="5,10,20">

					<p:column>
						<p:panel header="#{user.id}" style="text-align:center">
							<h:panelGrid columns="1" style="width:100%">
								<p:graphicImage value="/img/rss.png" />
								<h:outputText value="#{user.nombre} #{user.apellido}" />
								<p:commandButton type="push" id="Invitar" label="Invitar"
									image="ui-icon-mail-closed" action="#{contactos.contactar}">
									<f:setPropertyActionListener value="#{user}"
										target="#{contactos.contacto}" />
								</p:commandButton>
								<p:commandButton type="push" id="eliminar" label="eliminar"  value="Eliminar"
										image="ui-icon-mail-closed" action="#{contactos.eliminarContacto}">
										<f:setPropertyActionListener value="#{user}"
											target="#{contactos.contacto}" />
									</p:commandButton>
							</h:panelGrid>
						</p:panel>
					</p:column>

				</p:dataGrid>

				<h:panelGrid>
					<p>
						<h:messages style="color: red" />
					</p>
				</h:panelGrid>
			</p:panel>
		</h:form>
	</ui:define>
</ui:composition>
</html>